<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>选择座位</title>
<t:base type="jquery,easyui,tools,DatePicker"></t:base>
<style type="text/css">
 .squre{
 	display: inline-block;
 	padding:2px;
 	height:30px; 
 	line-height: 30px;
 	text-align: center; 
 	color: #fff;
    cursor: pointer;
    border-radius:5px;
    font-size:13px;
    margin:5px;
    border:2px solid white;
    width:90px;
    
 }
 
 .seatCharts-legend{
 	position: absolute;
 	bottom: 20px;
 }
 .seatCharts-legend li{ 
 	display:inline-block;
 } 
 
 .hasPower{
 	background-color: #B9DEA0;
 }
  .hasPower:hover{
  	background-color:#76b474
  }
  
  .noPower{
	background-color: #472B34;
}
 
 .noPower:hover{
	background-color: black;
}
 
  
  .squre.selected{
  	  border:2px solid #E6CAC4;
  }
 
  .rowTitle{
 	display: inline-block;
 	width:30px;
 	height:30px;
 	text-align:center;
 	line-height: 30px;
 }
 
 .front{
 	width:500px;
 	margin: 15px 32px 15px 32px;
    background-color: #f0f0f0;
    color: #666;
    text-align: center;
    padding: 3px;
 }
 
 #selected-seats{ 
    width: 72px;
    height: 26px;
    line-height: 26px;
    border: 1px solid #d3d3d3;
    background: #f7f7f7;
    margin: 6px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
 }
 
.booking-details{
 	padding: 20px;
    padding-top: 15px;
    font-size: 16px;
 }
 
 .booking-details p{
 	font-size: 16px;
 }
 
  .booking-details span{
 	font-size: 16px;
 }
 

 
</style>

</head>

<body>
<input id="computerRoomId" name='computerRoomId' type="hidden" />
 
 
 <div class="easyui-layout" fit="true">
	<div region="west" style="width: 600px;" title="机床信息" >
		 	<div class="front">讲台</div>	 
			<div id="seat-map" style="padding-left:25px;"> 
			</div>
			<div id="legend"></div>
	</div>
	<div region="center" style="padding:0px;border:0px" title="操作">
		
	    <div class="booking-details"> 
	    	实验室：
	    	<select id='roomSelect'>
	    		<c:forEach items='${list}' var="lab">
	    			<option value='${lab.id}'>${lab.name}</option> 
	    		</c:forEach> 
	    	</select>
	    
			<p>机床：<span id="selected-seats">未选择</span></p> 
<!-- 			<p>电源状态：<span id="power-state"></span></p>  -->
			<div id='onBtn' ></div>
			<div id='offBtn' style="margin-top: 10px;"></div>
			
			<div style="margin-top:10px;"><a onclick="confirmStartAll()" class="myBtn">打开所有电源</a></div>
			<div style="margin-top: 10px;"><a onclick="confirmShutDownAll()" class="myBtn">关闭所有电源</a></div>	
			
			<div  class="seatCharts-legend">
				<ul class="seatCharts-legendList">
				<li class="seatCharts-legendItem">
					图例：
				</li>
				<li class="seatCharts-legendItem" >
					<div class="squre hasPower" style="width: 50px;">打开</div>
				</li>
				
				<li class="seatCharts-legendItem">
					<div class="squre noPower"  style="width: 50px;">关闭</div>
				</li>
				</ul>
			</div>		
		</div>
	</div>
</div>
 
<script type="text/javascript"> 



$(document).ready(function() {  
	
	refreshSeats(); 
});
 
 

$('#roomSelect').on('change',function(){
	refreshSeats();
});

function seatClick(deviceId,name){
	$('#selected-seats').html(name);
	var seatObj = $('#'+deviceId);
	
	$('#onBtn').html('<a onclick="startup(\''+deviceId+'\')" class="myBtn">打开电源</a>');
	$('#offBtn').html('<a onclick="shutdown(\''+deviceId+'\')" class="myBtn">关闭电源</a>');

	$('.squre').removeClass('selected');
	seatObj.addClass('selected');
} 


function confirmShutDownAll(){
	$.dialog.confirm('您确定要关闭所有电源吗?', function(r) {
		   if (r) {
			   shutDownAll();
			}
	});
}

function confirmStartAll(){
	$.dialog.confirm('您确定要开启所有电源吗?', function(r) {
		   if (r) {
			   startUpAll();
			}
	});
}

function shutdown(deviceId){		
	$.dialog.confirm('您确定要关闭电源吗?', function(r) {
		   if (r) {
			   doShutdown(deviceId);
			}
	});
}


function doShutdown(deviceId){

	$('#'+deviceId).removeClass('hasPower');  
	$('#'+deviceId).addClass('noPower');
	var id = $('#roomSelect').val();
	  var url = "nodeController.do?operPower";
		$.ajax({
  		url:url,
  		type:"POST",
  		dataType:"JSON",
  		data:{
  			id:deviceId,
  			code:0
  		},
  		success:function(data){
			if(data.success){
				tip("操作成功");
			}else{
				tip("操作失败");
			}
  		}
  	});	
}

function shutDownAll(){  
	var id = $('#roomSelect').val();
	  var url = "nodeController.do?operAllPower";
		$.ajax({
  		url:url,
  		type:"POST",
  		dataType:"JSON",
  		data:{
  			labId:id,
  			code:0
  		},
  		success:function(data){
			if(data.success){
				tip("操作成功");
			}else{
				tip("操作失败");
			}
  		}
  	});
	
	//seatClick(row,col);
}

function startup(deviceId){
	$.dialog.confirm('您确定要打开电源吗?', function(r) {
		   if (r) {
			   doStartup(deviceId);
			}
	});
}

function doStartup(deviceId){
	$('#'+deviceId).removeClass('noPower'); 	 
	$('#'+deviceId).addClass('hasPower');
	
	 var url = "nodeController.do?operPower";
		$.ajax({
		url:url,
		type:"POST",
		dataType:"JSON",
		data:{
			id:deviceId,
			code:1
		},
		success:function(data){
			if(data.success){
				tip("操作成功");
			}else{
				tip(data.msg);
			}
		}
	});
}

function startUpAll(){
	 
	
	var id = $('#roomSelect').val();
	  var url = "nodeController.do?operAllPower";
		$.ajax({
		url:url,
		type:"POST",
		dataType:"JSON",
		data:{
			labId:id,
			code:1
		},
		success:function(data){
			if(data.success){
				tip("操作成功");
			}else{
				tip("操作失败");
			}
		}
	});
}
 



function refreshSeats(){
	var id = $('#roomSelect').val();
	$('#seat-map').html('');
	if(id != ''){
		 
		$.ajax({
			url:"nodeController.do?getLabDeviceList&labId="+id,
			success:function(data){
				data =$.parseJSON(data);
				var row = 0;
				var col = 0;
				var htmlString = '<table><tr>';
				for(var i=0;i<data.length;i++){
					var device = data[i];
					htmlString+="<td>";
					var state = device.state;
					if(state == "1"){
						htmlString+=('<div class="squre hasPower" id="'+device.id+'" onclick="seatClick(\''+device.id+'\',\''+device.machineName+'\')">'+device.machineName+'</div>');	
					}else if(state =="0"){
						htmlString+=('<div class="squre noPower" id="'+device.id+'" onclick="seatClick(\''+device.id+'\',\''+device.machineName+'\')">'+device.machineName+'</div>');
					}else{
						htmlString+=('<div class="squre hasPower" id="'+device.id+'" onclick="seatClick(\''+device.id+'\',\''+device.machineName+'\')">'+device.machineName+'</div>');	
					}
						
					htmlString+="</td>";
					
					col++;
					if(col >=5){
						row++;
						col = 0;
						htmlString+="</tr><tr>";
					}					
				}
				
				htmlString+="</tr></table>";
				$('#seat-map').append(htmlString);
			}
		 });
		  
	}
}
 

</script>
</body>
</html>